JSONP（JSON with Padding）可以看成是JSON的一种“使用模式”，用以解决“跨域访问”的问题，这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。[源代码从下载]

在这个例子中，我们将定义一个用于返回所有员工信息的服务，下面是用于表示员工信息的Employee的类型和契约接口。契约接口IEmployees的GetAll操作用以返回所有员工列表，我们指定了Uri模板并将回复消息格式设置为JSON。

1: using System.Collections.Generic;

2: using System.ServiceModel;

3: using System.ServiceModel.Web;

4: namespace Artech.WcfServices.Service.Interface

5: {

6:     [ServiceContract]

7:     public interface IEmployees

8:     {

9:         [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]

10:         IEnumerable
        
          GetAll();
        

11:     }

12:     public class Employee

13:     {

14:         public string Id { get; set; }

15:         public string Name { get; set; }

16:         public string Department { get; set; }

17:         public string Grade { get; set; }

18:     }

19: }

在如下所示的服务类型EmployeesService 中，我们直接让服务操作GetAll返回一个包含3个Employee对象的列表。

1: using System.Collections.Generic;

2: using Artech.WcfServices.Service.Interface;

3: namespace Artech.WcfServices.Service

4: {

5:     public class EmployeesService : IEmployees

6:     {

7:         public IEnumerable
        
          GetAll()
        

8:         {

9:             return new List
        

10:             {

11:                 new Employee{ Id = "001", Name="张三", Department="开发部", Grade = "G6"},

12:                 new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"},

13:                 new Employee{ Id = "003", Name="王五", Department="销售部", Grade = "G8"}

14:             };

15:         }

16:     }

17: }

我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力，我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性，如果直接使用WebHttpBinding也需要将该属性设置为True。

1: 
        

2:   
        

3:     
        

4:       
        

5:         
        

6:       

7:     

8:     
        

9:       
        

10:         
        

11:       

12:     

13:     
        

14:       
        

15:         

16:                   address="http://127.0.0.1:3721/employees"

17:                   contract="Artech.WcfServices.Service.Interface.IEmployees"/>

18:       

19:     

20:   

21: 

在客户端，我们在一个Web页面中通过jQuery进行Ajax调用这个服务，并将得到的员工列表显示在一个表格中。出CSS之外的页面代码如下所示，需要注意的是在进行Ajax调用的使用将dataType选项设置成“jsonp”，而不是“json”。

1: 

2: 

3:   

4:     

5:     

6:        ...

7:     

8:     

9:     

10:         $(function () {

11:             $.ajax({

12:                 type: "get",

13:                 url: "http://127.0.0.1:3721/employees/all",

14:                 dataType: "jsonp",

15:                 success: function (employees) {

16:                     $.each(employees, function (index, value) {

17:                         var detailUrl = "detail.html?id=" + value.Id;

18:                         var html = "";

19:                         html += value.Id + "";

20:                         html += "" + value.Name + "";

21:                         html += value.Grade + "";

22:                         html += value.Department + "";

23:                         $("#employees").append(html);

24:                     });

25:                     $("#employees tr:odd").addClass("oddRow");

26:                 }

27:             });

28:         });

29:      

30:   

31:   

32:     
        

33:         

34:             ID

35:             姓名

36:             级别

37:             部门

38:         

39:     

40: 

41: 

当服务启动后在浏览器中显示上面这个Web页面，会得到如下所示的员工列表。